<template>
	<view class="content">
		<image src="../../static/img/integral/rectangle.png" mode="aspectFill" class="top_back_img"></image>
		<view class="head_wrap">
			<view class="head_wrap_top">
				<view class="row_top">
					<view class="row_top_left">{{ showSumIntegral ? sumIntegral : '****' }}</view>
					<view class="row_top_right uni-icon uni-icon-eye" @click="changeSumIntegral"></view>
				</view>
				<view class="row_buttom">总积分</view>
			</view>
			<view class="head_wrap_buttom">
				<view class="head_wrap_buttom_left">
					<view class="head_wrap_buttom_left_top">{{ waitEntryAccount }}</view>
					<view class="head_wrap_buttom_left_buttom">待入帐积分</view>
				</view>
				<view class="head_wrap_buttom_right">
					<view class="head_wrap_buttom_right_top">{{ canWithdrawal }}</view>
					<view class="head_wrap_buttom_right_buttom">可提现积分</view>
				</view>
			</view>
		</view>
		<view class="account_wrap" @tap="navigator1">
			<image src="/static/img/integral/money.png" mode="aspectFill"></image>
			<view class="text">提现</view>
		</view>
		<view class="row-line" />
		<view class="account_wrap" @tap="navigator2">
			<image src="/static/img/integral/account.png" mode="aspectFill"></image>
			<view class="text">我的账户</view>
		</view>
		<view class="row-line" />
		<view class="account_wrap" @tap="navigator3">
			<image src="/static/img/integral/integral.png" mode="aspectFill"></image>
			<view class="text">积分统计</view>
		</view>
	</view>
</template>

<script>
import {bonus} from '@/utils/api';
export default {
	data() {
		return {
			sumIntegral: "0",
			waitEntryAccount: "0",
			canWithdrawal: "0",
			showSumIntegral: true
		};
	},
	methods: {
		navigator1() {
			let approved = uni.getStorageSync("userInfo").approved;
			if(approved){
				uni.navigateTo({
					url: '/pages/getIntegral/getIntegral?canWithdrawal='+this.canWithdrawal
				})
			}else{
				// unAuthMsg
				uni.showToast({
					icon:'none',
					title:uni.getStorageSync("userInfo").unAuthMsg,
					duration:1000,
					position:'bottom'
				})
			}
			
		},
		navigator2() {
			uni.navigateTo({
				url: '/pages/myAccount/myAccount'
			})
		},
		navigator3() {
			uni.navigateTo({
				url: '/pages/integralCount/integralCount'
			})
		},
		async getNtegralData() {
			let res = await bonus();
			if(res.status==0){
				this.sumIntegral = res.data.total;
				this.waitEntryAccount = res.data.waitBonus;
				this.canWithdrawal = res.data.withdrawBonus;
				this.$forceUpdate();
			}else{
				uni.showToast({
					icon:'none',
					title:res.message,
					duration:1000,
					position:'bottom'
				})
			}
		},
		changeSumIntegral() {
			this.showSumIntegral = !this.showSumIntegral;
			uni.setStorageSync("showSumIntegral", this.showSumIntegral);
		}
	},
	onLoad() {
		//查询积分数据
		this.getNtegralData();
		const showSumIntegral = uni.getStorageSync("showSumIntegral");
		console.log(showSumIntegral);
		if (showSumIntegral != undefined) {
			this.showSumIntegral = showSumIntegral;
		}
	}
}
</script>

<style lang="scss">
page {
	background-color: #f4f4f4;
}

.content {
	width: 100%;
	height: 805upx;
	background: #ffffff;
	border-top: 2upx solid #e3e3e3;
	display: flex;
	flex-direction: column;
	z-index: -1;
}

.top_back_img {
	z-index: 0;
	position: absolute;
	width: 705upx;
	height: 443upx;
	margin: 28upx 23upx 10upx 23upx;
}

.head_wrap {
	z-index: 1;
	width: 705upx;
	height: 443upx;
	margin: 28upx 23upx 10upx 23upx;

	.head_wrap_top {
		width: 100%;
		height: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;

		.row_top {
			display: flex;
			flex-direction: row;
			padding-top: 94upx;
			color: #ffffff;
			padding-left: 60upx;

			.row_top_left {
				line-height: 1;
				font-size: 48upx;
			}

			.row_top_right {
				margin-left: 19upx;
				font-size: 40upx;
				color: #ffffff;
			}
		}

		.row_buttom {
			text-align: center;
			line-height: 1;
			font-size: 30upx;
			margin-top: 10upx;
			color: #ffffff;
		}
	}

	.head_wrap_buttom {
		display: flex;
		flex-direction: row;
		width: 100%;
		height: 50%;

		.head_wrap_buttom_left {
			width: 150upx;
			height: 75upx;
			text-align: center;
			margin-left: 106upx;
			font-size: 30upx;
			color: #ffffff;
			line-height: 1;
		}

		.head_wrap_buttom_right {
			width: 150upx;
			height: 75upx;
			text-align: center;
			margin-left: 195upx;
			font-size: 30upx;
			color: #ffffff;
			line-height: 1;
		}
	}
}

.account_wrap {
	display: flex;
	flex-direction: row;
	align-items: center;
	height: 105upx;
	margin: 0upx 31upx;

	image {
		height: 40upx;
		width: 40upx;
	}

	.text {
		font-size: 30upx;
		color: #333333;
		margin-left: 37upx;
		line-height: 1;
	}
}

.row-line {
	background: #f4f4f4;
	height: 2upx;
}
</style>
